<template>
  <div>
    <el-form-item
      :label="widget.name"
      :prop="widget.model"
      v-if="widget.type !== 'line'"
      :label-width="widget.name === '' ?  'auto' : ''"
    >
      <template v-if="widget.type == 'input'">
        <el-input
          v-if="widget.options.dataType == 'number' || widget.options.dataType == 'integer' || widget.options.dataType == 'float'"
          :type="widget.options.dataType"
          v-model.number="dataModel"
          :placeholder="widget.options.placeholder"
          :style="{width: widget.options.width}"
          :disabled="widget.options.disabled"
          @change="handleChange"
        ></el-input>
        <el-input
          v-else
          :type="widget.options.dataType"
          v-model="dataModel"
          :disabled="widget.options.disabled"
          :placeholder="widget.options.placeholder"
          :style="{width: widget.options.width}"
          @change="handleChange"
        ></el-input>
      </template>

      <template v-if="widget.type == 'textarea'">
        <el-input
          type="textarea"
          :rows="5"
          v-model="dataModel"
          :disabled="widget.options.disabled"
          :placeholder="widget.options.placeholder"
          :style="{width: widget.options.width}"
          @change="handleChange"
        ></el-input>
      </template>

      <template v-if="widget.type == 'number'">
        <el-input-number
          v-model="dataModel"
          :style="{width: widget.options.width}"
          :step="widget.options.step"
          controls-position="right"
          :disabled="widget.options.disabled"
          @change="handleChange"
        ></el-input-number>
      </template>

      <template v-if="widget.type == 'radio'">
        <el-radio-group
          v-model="dataModel"
          :style="{width: widget.options.width}"
          :disabled="widget.options.disabled"
          @change="handleChange"
        >
          <el-radio
            :style="{display: widget.options.inline ? 'inline-block' : 'block'}"
            @change="handleChange"
            :label="item.value"
            v-for="(item, index) in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)"
            :key="index"
          >
            <template v-if="widget.options.remote">{{item.label}}</template>
            <template v-else>{{widget.options.showLabel ? item.label : item.value}}</template>
          </el-radio>
        </el-radio-group>
      </template>

      <template v-if="widget.type == 'checkbox'">
        <el-checkbox-group
          v-model="dataModel"
          :style="{width: widget.options.width}"
          :disabled="widget.options.disabled"
          @change="handleChange"
        >
          <el-checkbox
            @change="handleChange"
            :style="{display: widget.options.inline ? 'inline-block' : 'block'}"
            :label="item.value"
            v-for="(item, index) in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)"
            :key="index"
          >
            <template v-if="widget.options.remote">{{item.label}}</template>
            <template v-else>{{widget.options.showLabel ? item.label : item.value}}</template>
          </el-checkbox>
        </el-checkbox-group>
      </template>

      <template v-if="widget.type == 'time'">
        <el-time-picker
          @change="handleChange"
          v-model="dataModel"
          :is-range="widget.options.isRange"
          :placeholder="widget.options.placeholder"
          :start-placeholder="widget.options.startPlaceholder"
          :end-placeholder="widget.options.endPlaceholder"
          :readonly="widget.options.readonly"
          :disabled="widget.options.disabled"
          :editable="widget.options.editable"
          :clearable="widget.options.clearable"
          :arrowControl="widget.options.arrowControl"
          :value-format="widget.options.format"
          :style="{width: widget.options.width}"
        ></el-time-picker>
      </template>
      <template v-if="widget.type=='date'">
        <el-date-picker
          @change="handleChange"
          v-model="dataModel"
          :type="widget.options.type"
          :placeholder="widget.options.placeholder"
          :start-placeholder="widget.options.startPlaceholder"
          :end-placeholder="widget.options.endPlaceholder"
          :readonly="widget.options.readonly"
          :disabled="widget.options.disabled"
          :editable="widget.options.editable"
          :clearable="widget.options.clearable"
          :value-format="widget.options.timestamp ? 'timestamp' : widget.options.format"
          :format="widget.options.format"
          :style="{width: widget.options.width}"
        ></el-date-picker>
      </template>

      <template v-if="widget.type=='datetime'">
        <el-date-picker
          v-model="dataModel"
          :type="widget.options.type"
          :placeholder="widget.options.placeholder"
          :start-placeholder="widget.options.startPlaceholder"
          :end-placeholder="widget.options.endPlaceholder"
          :readonly="widget.options.readonly"
          :disabled="widget.options.disabled"
          :editable="widget.options.editable"
          :clearable="widget.options.clearable"
          :value-format="widget.options.timestamp ? 'timestamp' : widget.options.format"
          :format="widget.options.format"
          :style="{width: widget.options.width}"
          @change="handleChange"
        ></el-date-picker>
      </template>

      <template v-if="widget.type =='rate'">
        <el-rate
          v-model="dataModel"
          :max="widget.options.max"
          :disabled="widget.options.disabled"
          :allow-half="widget.options.allowHalf"
          @change="handleChange"
        ></el-rate>
      </template>

      <template v-if="widget.type == 'color'">
        <el-color-picker
          v-model="dataModel"
          :disabled="widget.options.disabled"
          :show-alpha="widget.options.showAlpha"
          @change="handleChange"
        ></el-color-picker>
      </template>

      <template v-if="widget.type == 'select'">
        <el-select
          v-model="dataModel"
          :disabled="widget.options.disabled"
          :multiple="widget.options.multiple"
          :clearable="widget.options.clearable"
          :placeholder="widget.options.placeholder"
          :style="{width: widget.options.width}"
          :filterable="widget.options.filterable"
          @change="handleChange"
        >
          <el-option
            v-for="item in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)"
            :key="item.value"
            :value="item.value"
            :label="widget.options.showLabel || widget.options.remote?item.label:item.value"
          ></el-option>
        </el-select>
      </template>

      <template v-if="widget.type=='switch'">
        <el-switch v-model="dataModel" :disabled="widget.options.disabled" @change="handleChange"></el-switch>
      </template>

      <template v-if="widget.type=='slider'">
        <el-slider
          v-model="dataModel"
          :min="widget.options.min"
          :max="widget.options.max"
          :disabled="widget.options.disabled"
          :step="widget.options.step"
          :show-input="widget.options.showInput"
          :range="widget.options.range"
          :style="{width: widget.options.width}"
          @change="handleChange"
        ></el-slider>
      </template>

      <template v-if="widget.type=='imgupload'">
        <image-upload
          v-model="dataModel"
          :disabled="widget.options.disabled"
          :style="{'width': widget.options.width}"
          :width="widget.options.size.width"
          :height="widget.options.size.height"
          :token="widget.options.token"
          :domain="widget.options.domain"
          :multiple="widget.options.multiple"
          :limit="widget.options.limit"
          :is-qiniu="widget.options.isQiniu"
          :is-delete="widget.options.isDelete"
          :min="widget.options.min"
          :is-edit="widget.options.isEdit"
          :action="widget.options.action"
          :headers="widget.options.headers"
          :responseUrlField="widget.options.responseUrlField"
        ></image-upload>
      </template>

      <template v-if="widget.type=='fileupload'">
        <file-upload
          v-model="dataModel"
          :disabled="widget.options.disabled"
          :style="{'width': widget.options.width}"
          :width="widget.options.size.width"
          :height="widget.options.size.height"
          :token="widget.options.token"
          :domain="widget.options.domain"
          :multiple="widget.options.multiple"
          :limit="widget.options.limit"
          :min="widget.options.min"
          :auto-upload="widget.options.autoUpload"
          :list-type="widget.options.listType"
          :drag="widget.options.drag"
          :action="widget.options.action"
          :tip="widget.options.tip"
          :headers="widget.options.headers"
          :responseUrlField="widget.options.responseUrlField"
          @fileUpload="$emit('fileUpload', $event)"
        ></file-upload>
      </template>

      <template v-if="widget.type == 'editor'">
        <fm-editor
          v-model="dataModel"
          :width="widget.options.width"
          :height="widget.options.height"
        ></fm-editor>
      </template>

      <template v-if="widget.type == 'cascader'">
        <el-cascader
          v-model="dataModel"
          :disabled="widget.options.disabled"
          :clearable="widget.options.clearable"
          :placeholder="widget.options.placeholder"
          :style="{width: widget.options.width}"
          :options="widget.options.remoteOptions"
          @change="handleChange"
        ></el-cascader>
      </template>
    </el-form-item>
    <div v-else>
      <!-- 分割线 -->
      <div v-if="widget.type=='line'" class="line" :class="{bold: widget.options.bold}">
        <!-- <el-divider :content-position="widget.options.contentPosition">{{widget.name}}</el-divider> -->
        <dg-line :position="widget.options.contentPosition" :content="widget.name"></dg-line>
      </div>
    </div>
  </div>
</template>

<script>
import ImageUpload from "./Upload/image";
import FileUpload from "./Upload/file";
import FmEditor from "./Editor/tinymce";
import DgLine from "./Line/index.vue";
export default {
  props: ["widget", "models", "rules", "remote"],
  components: {
    ImageUpload,
    FileUpload,
    FmEditor,
    DgLine
  },
  data() {
    return {
      dataModel: this.models[this.widget.model]
    };
  },
  created() {
    if (
      this.widget.options.remote &&
      this.remote[this.widget.options.remoteFunc]
    ) {
      this.remote[this.widget.options.remoteFunc](data => {
        this.widget.options.remoteOptions = data.map(item => {
          return {
            value: item[this.widget.options.props.value],
            label: item[this.widget.options.props.label],
            children: item[this.widget.options.props.children]
          };
        });
      });
    }

    if (this.widget.type === "imgupload" && this.widget.options.isQiniu) {
      this.remote[this.widget.options.tokenFunc](data => {
        this.widget.options.token = data;
      });
    }
  },
  methods: {
    handleChange() {
      let model = this.widget.model;
      let ev = {
        model,
        value: this.models[model],
        type: this.widget.type,
        widget: this.widget
      };
      this.$emit("change", ev);
    }
  },
  watch: {
    dataModel: {
      deep: true,
      handler(val) {
        this.models[this.widget.model] = val;
        this.$emit("update:models", {
          ...this.models,
          [this.widget.model]: val
        });
      }
    },
    models: {
      deep: true,
      handler(val) {
        this.dataModel = val[this.widget.model];
      }
    }
  }
};
</script>

<style >
.line.bold .dg-divider .dg-divider__text {
  font-weight: bold;
}
.line.bold .el-divider .el-divider__text {
  font-weight: bold;
}
</style>